<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<body>
<div>
    <div>

    </div>

    <div>
            <h3>登 录</h3>
            <input type="text" placeholder="请输入用户名" v-model="user.name"/>
            <input ctype="password" placeholder="请输入密码" v-model="user.password"/>
            <div>
                <button @click="">登录</button>
				<button @click="">注册</button>
            </div>
    </div>
</div>
<script src="../js/vue.js"></script>
<script src="../js/axios.js"></script>
<script>
    const app = new Vue({
    	el: "#app",
    	data: {
    		//1.定义用户列表数据
    		userList: [],
    		//2.定义用户属性
    		user: {
    			name: '',
    			password: ''
    		}
    	},
    	methods: {

    		//更新按钮操作
    		updateBtn(user){
    			//将用户传递的user对象赋值给data中的属性user
    			this.user = user
    		},
    		//更新用户信息
    		async updateUser(){
    			//请求类型 PUT/POST   GET/DELETE
    			//http://localhost:8090/axiosUser/updateUser
    			//更新操作可以没有返回值
    			await axios.put('http://localhost:8090/axiosUser/updateUser',this.user)
    		},
    		
    		async deleteUser(user){
    			//根据Id进行删除  get/delete 
    			//参数传递3种  ?id=xxx   /delete/xxx  params
    			let id = user.id 
    			//axios.delete('/axiosUser/deleteUser?id='+id)
    			//axios.delete('/axiosUser/deleteUser/'+id)
    			await axios.delete('http://localhost:8090/axiosUser/deleteUser',{
    				params : {
    					id: id
    				}
    			})
    			//删除之后,需要将页面重新刷新
    			this.getUserList()
    		}
    			
    	},
    	mounted(){
    		//当页面渲染成功之后调用
    		//调用查询用户的方法
    		this.getUserList()
    	}
    })
    
</script>
</body>
</html>